{% block sw_settings_currency_country_modal %}
<sw-modal
    class="sw-settings-currency-country-modal"
    :title="$tc('sw-settings-currency.currency-country-modal.titleNewCurrencyCountry')"
    @modal-close="onCancel"
>
    {% block sw_settings_currency_country_modal_country_select %}
    <sw-entity-single-select
        v-model:value="currencyCountryRounding.countryId"
        required
        show-clearable-button
        class="sw-settings-currency-country-modal__select-country"
        :label="$tc('sw-settings-currency.currency-country-modal.labelCountrySelect')"
        entity="country"
        :criteria="countryCriteria"
        :error="currencyCountryRoundingCountryIdError"
    >
        <template #result-item="{ item, index, labelProperty, searchTerm, highlightSearchTerm, isSelected, setValue, getKey }">
            <sw-select-result
                v-tooltip="{
                    showDelay: 300,
                    showOnDisabledElements: true,
                    message: $tc('sw-settings-currency.currency-country-modal.countryAlreadyAssigned'),
                    disabled: !shouldDisableCountry(item)
                }"
                :selected="isSelected(item)"
                :disabled="shouldDisableCountry(item)"
                v-bind="{ item, index }"
                @item-select="setValue"
            >
                <slot
                    name="result-label-property"
                    v-bind="{ item, index, labelProperty, searchTerm, highlightSearchTerm, getKey }"
                >
                    <sw-highlight-text
                        v-if="highlightSearchTerm"
                        :text="getKey(item, labelProperty) || getKey(item, `translated.${labelProperty}`)"
                        :search-term="searchTerm"
                    />
                    <template v-else>
                        {{ getKey(item, labelProperty) || getKey(item, `translated.${labelProperty}`) }}
                    </template>
                </slot>
            </sw-select-result>
        </template>
    </sw-entity-single-select>
    {% endblock %}

    {% block sw_settings_currency_country_modal_price_rounding %}
    <sw-settings-price-rounding
        :item-rounding="currencyCountryRounding.itemRounding"
        :total-rounding="currencyCountryRounding.totalRounding"
    />
    {% endblock %}

    {% block sw_settings_currency_country_modal_footer %}
    <template #modal-footer>
        {% block sw_settings_currency_country_modal_footer_cancel %}
        <mt-button
            size="small"
            variant="secondary"
            @click="onCancel"
        >
            {{ $tc('global.default.cancel') }}
        </mt-button>
        {% endblock %}

        {% block sw_settings_currency_country_modal_footer_save %}
        <mt-button
            variant="primary"
            size="small"
            class="sw-settings-currency-country-modal__button-save"
            @click="onSave"
        >
            {{ $tc('global.default.save') }}
        </mt-button>
        {% endblock %}
    </template>
    {% endblock %}
</sw-modal>
{% endblock %}
